<template>
	<view class="paper-box" :class="iconBox" >
		<view   class="paper-list u-f-ac animated fadeIn fast" @tap="opendetail">
			<view >
				<view class="d-top">
					<view class="d-box u-f-ac u-f-jsb"  >
						<text class="d-title">{{item.name}}</text>
						<text class="d-status" :class="icon">{{status}}</text>
					</view>
					<view style="margin-right: 20upx;">{{item.encoded}}</view>
					
				</view>
				<view class="d-bottom">
					<view class="d-type">
						<view class="d-type-item d-type-r"  v-if="item.mechGress"><uni-icons type="forward" size="12"></uni-icons><text class="time" v-if="item.mechtime">{{item.mechtime}}</text><text>{{item.mechGress}}</text></view>
						<view class="d-type-item d-type-w" v-if="item.elecGress"><uni-icons type="forward" size="12"></uni-icons><text class="time" v-if="item.electime">{{item.electime}}</text><text>{{item.elecGress}}</text></view>
						<view class="d-type-item d-type-w" v-if="item.remark"><uni-icons type="forward" size="12"></uni-icons><text class="time" v-if="item.remarktime">{{item.remarktime}}</text><text>{{item.remark}}</text></view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="d-bottom1" v-if="item.encoded">
			<view class="d-sn1" v-for="(item1,index1) in item.nCompanyType"  @tap.stop="goBigScreen1(item,item1)">{{item1}}</view>
		</view> -->
	</view>
</template>

<script>
	// import uniTag from "@/components/uni-tag/uni-tag.vue"
	export default {
		components:{
			// uniTag
		},
		props:{
			item:Object,
			index:Number	
		},
		data(){
			return{
			  projectTypeData:[{id:0,status:"已完成",icon:'info'},{id:1,status:"已出货",icon:'primary'},
			  {id:2,status:"待出货",icon:'success'},{id:3,status:"调试中",icon:'success'},
			  {id:4,status:"组装中",icon:'success'},{id:5,status:"待制作",icon:'success'},{id:6,status:"采购中",icon:'success'},
			  {id:7,status:"等通知",icon:'warning'},{id:8,status:"评估",icon:'warning'}],
			  icon:'',
			  status:'',
			  iconBox:''
			}
		},
		mounted() {
			this.icon=this.projectTypeData[this.item.progress]['icon']
			this.status=this.projectTypeData[this.item.progress]['status']
			this.iconBox=this.projectTypeData[this.item.progress]['icon']+'Box'
			
		},

		watch:{
			item(n,o){ //n为新值,o为旧值;
			  // this.item = n;
			  this.icon=this.projectTypeData[this.item.progress]['icon']
			  this.status=this.projectTypeData[this.item.progress]['status']
			  this.iconBox=this.projectTypeData[this.item.progress]['icon']+'Box'
			}
		},

		// filters:{
		// 	filterIcon(item){
		// 		return this.projectTypeData[item]['icon']
		// 	},
		// 	filterVal(item){
		// 		return this.projectTypeData[item]['status']
		// 	}
		// }
		methods:{
			opendetail(){
				uni.navigateTo({
				    // url: `/pages/detail/detail?sn=${this.item.sn}&dName=${this.item.deviceName}`
					url: `/pages/detail/detail?item=${JSON.stringify(this.item)}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.paper-box{
	background: #fff;
	margin-bottom: 2upx;
	// padding: 10upx 20upx 0upx;
	border-bottom: 5upx solid #EEEEEE;
	margin-bottom: 10upx;
}
.paper-list{
	// padding: 20upx 20upx;
	border-radius: 20upx;
}
.paper-list>image{
	width: 100upx;
	height: 100upx;
	border-radius: 100%;
	margin-right: 20upx;
	flex-shrink: 0;
}
.paper-list>view{
	flex: 1;
}
.paper-list>view>view:first-child{
	font-size: 35upx;
}
.paper-list>view>view:first-child>view{
	color: #CBCBCB;
}
.paper-list>view>view:last-child{
	color: #999999;
}
.d-top{
	display: flex;
	justify-content: space-between;
}
.d-box{
	display: flex;
	justify-content: flex-start;
	width: 500upx;
}
.d-title{
	max-width: 400upx;
	margin-right: 5upx;
	white-space: nowrap;/*内容超宽后禁止换行显示*/
	overflow: hidden;/*超出部分隐藏*/
	text-overflow:ellipsis;/*文字超出部分以省略号显示*/
	color: #1B1B1B;
	font-size: 35upx;
	// font-weight:600;
}
.d-status{
	width: 80upx;
	padding: 0upx 5upx;
	border-radius: 15upx;
	text-align: center;
	border:1px solid #ccc;
	font-size: 20upx;
	color: #fff;
}
.time{
	color: #E6A23C;
}
.info{
  background-color:  #909399;
}
.success{
	background-color: #67C23A
}
.warning{
	background-color: #E6A23C
}
.primary{
	background-color: #00aaff;
}
.infoBox{
  // background-color:  #909399;
  border-left: 10upx solid #909399;
}
.successBox{
	// background-color: #67C23A;
	border-left: 10upx solid #67C23A;
}
.warningBox{
	// background-color: #E6A23C;
	border-left: 10upx solid #E6A23C;
}
.primaryBox{
	// background-color: #007AFF;
	border-left: 10upx solid #007AFF;
}

.d-bottom{
	// display: flex;
	// justify-content: space-between;
	color: #828282;
}
.d-bottom1{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	border-top: 1upx solid #F5F5F5;
}

.d-type{
	// display: flex;
	padding: 10upx 0upx;
	// height: 40upx;
	// .d-type-item{
	// 	display: flex;
	// 	align-items: center;
	// 	text:first-child{
	// 		margin-right: 5upx;
	// 	}
	// }
	// .d-type-r{
	// 	margin-right: 5upx;
	// }
	// .d-type-w,.d-type-r{
	// 	text:nth-child(2){
	// 		width: 20px;
	// 	}
	// }
}
</style>
